import Vue from "vue";
import LsDialogPanel from "./LsDialogPanel.vue";
import {DataType, MethodsType, PropsType} from "../../../types/LsDialog";

export default Vue.extend<DataType, MethodsType, unknown, PropsType>({
  name: "LsDialog",
  components: {LsDialogPanel},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    titleText: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    fullScreen: {
      type: Boolean,
      default: false
    },
    showFullScreen: {
      type: Boolean,
      default: false
    },
    closeConfirm: {
      type: Boolean,
      default: false
    },
    closeTip: {
      type: String,
      default: '弹窗即将关闭，确认吗？'
    },
    modal: {
      type: Boolean,
      default: true
    },
    draggable: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    fitHeight: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: 'unset'
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    boxCenter: {
      type: Boolean,
      default: true
    },
    //当boxCenter为false时，left的值，default: 'unset'
    left: {
      type: String,
      default: 'unset'
    },
    //当boxCenter为false时，top的值，default: 'unset'
    top: {
      type: String,
      default: 'unset'
    },
    //当boxCenter为false时，right的值，default: 'unset'
    right: {
      type: String,
      default: 'unset'
    },
    //当boxCenter为false时，bottom的值，default: 'unset'
    bottom: {
      type: String,
      default: 'unset'
    },
    //是否显示脚部按钮区域
    showFooter: {
      type: Boolean,
      default: true
    },
  },
  mounted() {
    this.isLeaving = false;
    this.firstShow = true;
    if (this.appendToBody) {
      this.originalParent = this.$el.parentElement!;
      let target = 'body';
      if (Vue.prototype.$LsOption?.body)
        target = Vue.prototype.$LsOption.body;
      const targetDom = document.querySelector(target);
      if (targetDom) {
        targetDom.append(this.$el);
      }
    }
  },
  beforeDestroy() {
    if (this.appendToBody)
      this.originalParent?.append(this.$el);
  },
  watch: {
    value(value) {
      if (value) {
        this.isLeaving = false;
        //当弹窗可见后，设置焦点方便按esc
        this.$nextTick(() => (this.$refs.lsDialogPanel as any)?.$el?.focus());
      }
      //当dom挂载并显示后，offsetParent才能获取到
      if (value && this.firstShow) {
        this.$nextTick(() => (this.$refs.lsDialogPanel as any).initSize());
        this.firstShow = false;
      }
    }
  },
  methods: {
    async closeDialog(type: 'byButton' | 'byModal' | 'byKey' | PointerEvent) {
      //如果是事件（从slot点击）
      if (type instanceof PointerEvent)
        type = "byButton";
      if (this.isLeaving)
        return;
      if (this.closeConfirm) {
        try {
          (this.$refs.lsDialogPanel as any)?.$el?.blur();
          await this.$confirm(this.closeTip);
        } catch {
          return;
        }
      }
      this.$emit('input', false);
      this.$emit('dialogClose', type);
    },
    //模块上点击才能触发关闭弹窗
    modalClick(downFlag: boolean) {
      if (!this.closeOnClickModal)
        return;
      if (downFlag)
        this.modelDownFlag = true;
      else if (!downFlag && this.modelDownFlag) {
        this.modelDownFlag = false;
        this.closeDialog("byModal");
      }
    },
    confirm() {
      this.$emit('confirm');
    },
    sizeChange() {
      this.$emit('sizeChange');
    },
    leavingEvent() {
      this.isLeaving = true;
    }
  }
})
